<template>
  <a-layout class="user-center">
    <a-layout-sider width="250" theme="light" class="sider">
      <a-menu
          mode="inline"
          :selectedKeys="[selectedMenuItem]"
          style="height: 100%"
          @click="changeMenuItem"
      >
        <a-menu-item key="profile">
          <user-outlined/>
          <span>个人资料</span>
        </a-menu-item>
        <a-menu-item key="orders">
          <shopping-outlined/>
          <span>我的订单</span>
        </a-menu-item>
        <a-menu-item key="favorites">
          <heart-outlined/>
          <span>我的收藏</span>
        </a-menu-item>
        <a-menu-item key="messages">
          <message-outlined/>
          <span>消息中心</span>
        </a-menu-item>
        <a-menu-item key="settings">
          <setting-outlined/>
          <span>账户设置</span>
        </a-menu-item>
        <a-menu-item key="products">
          <shopping-outlined/>
          <span>我的商品</span>
        </a-menu-item>
        <a-menu-item key="cart">
          <shopping-cart-outlined/>
          <span>购物车</span>
        </a-menu-item>
        <a-menu-item key="stats">
          <bar-chart-outlined />
          <span>商品统计</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout-content class="content">
      <a-page-header
          :title="pageTitle"
          :sub-title="pageSubTitle"
          @back="onBack"
      />
      <div class="content-area">
        <component :is="currentComponent"/>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import {ref, computed} from 'vue';
import {
  UserOutlined,
  ShoppingOutlined,
  HeartOutlined,
  MessageOutlined,
  SettingOutlined,
  BarChartOutlined,
  ShoppingCartOutlined
} from '@ant-design/icons-vue';
import {useRouter} from 'vue-router';

// 导入各个子组件
import UserProfile from '@/components/user/usercenter/UserProfile.vue';
import UserOrders from '@/components/user/usercenter/UserOrders.vue';
import UserFavorites from '@/components/user/usercenter/UserFavorites.vue';
import UserMessages from '@/components/user/usercenter/UserMessages.vue';
import UserSettings from '@/components/user/usercenter/UserSettings.vue';
import UserProducts from '@/components/user/usercenter/UserProducts.vue';
import ShoppingCart from '@/components/user/usercenter/ShoppingCart.vue';
import UserProductStats from "@/components/user/usercenter/UserProductStats.vue";

const router = useRouter();
const selectedMenuItem = ref('profile');

const componentMap = {
  profile: UserProfile,
  orders: UserOrders,
  favorites: UserFavorites,
  messages: UserMessages,
  settings: UserSettings,
  products: UserProducts,
  cart: ShoppingCart,
  stats: UserProductStats
};

const currentComponent = computed(() => componentMap[selectedMenuItem.value]);

const changeMenuItem = ({key}) => {
  selectedMenuItem.value = key;
}

const pageTitle = computed(() => {
  const titles = {
    profile: '个人资料',
    orders: '我的订单',
    favorites: '我的收藏',
    messages: '消息中心',
    settings: '账户设置',
    products: '我的商品',
    publish: '发布商品',
    cart: '购物车',
    stats: '商品统计',
  };
  return titles[selectedMenuItem.value];
});

const pageSubTitle = computed(() => {
  const subTitles = {
    profile: '查看和编辑您的个人信息',
    orders: '管理您的订单',
    favorites: '查看您收藏的商品',
    messages: '查看您的消息和通知',
    settings: '管理您的账户设置',
    products: '管理您发布的商品',
    publish: '发布新的商品',
    cart: '查看您的购物车',
    stats: '查看您的商品发布统计',
  };
  return subTitles[selectedMenuItem.value];
});

const onBack = () => {
  router.push('/');
};
</script>

<style scoped>
.user-center {
  min-height: calc(100vh - 64px); /* 假设顶部导航栏高度为64px */
}

.sider {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.content {
  padding: 0 24px 24px;
  background: #fff;
}

.content-area {
  background: #fff;
  padding: 0 20px;
  min-height: 280px;
  height:600px;
}
</style>
